<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { useSvgIcon } from '@/hooks/common/icon';
import { useStore } from '../../store';
const store = useStore();
const { SvgIconVNode } = useSvgIcon();
const canvasDict = ref(store.getDict('canvas'));
const canvasConfig = ref(store.canvasConfig);

// 删除当前图层
// function removeCurrent() {}

// 下拉操作
const dropdown = reactive<any>({
  icon: '', // 显示icon
  size: '', // 显示文本
  options: [],
  init: () => {
    // 筛选项赋值
    dropdown.options = canvasDict.value.map((ops: any) => {
      const { icon, label, size } = ops;
      return {
        label,
        key: size,
        disabled: size === store.canvasConfig.size,
        icon: SvgIconVNode({ localIcon: icon, fontSize: 16 })
      };
    });
    // 下拉回显
    const { size, icon } = store.canvasConfig;
    dropdown.size = size;
    dropdown.icon = icon;
  }
});

watch(
  canvasConfig,
  () => {
    dropdown.init();
  },
  { immediate: true, deep: true }
);
// 画布切换
const modal = reactive({
  visible: false,
  size: '',
  content: '',
  subContent: '',
  show: (size: string) => {
    modal.size = size;
    modal.content = `确定切换成${size}比例？`;
    modal.subContent = '切换比例会导致所有设计样式丢失且不可恢复！';
    modal.visible = true;
  },
  submit: async () => {
    await store.updateCanvasSize(modal.size); // 触发画布更新
    dropdown.init();
    modal.visible = false;
  },
  reset: () => {
    modal.size = '';
    modal.content = '';
    modal.subContent = '';
  }
});

onMounted(() => {
  dropdown.init();
});
</script>

<template>
  <div class="mr-4">
    <!--
 <NButton disabled class="h-10 w-10 rd-2 p-0" @click="removeCurrent">
      <SvgIcon class="text-5" icon="clarity:trash-line"></SvgIcon>
    </NButton>
-->
    <!-- 下拉选择 -->
    <NDropdown trigger="click" :options="dropdown.options" @select="modal.show">
      <NButton type="default" ghost class="pointer-events-auto rounded-2 text-base_text !w-24">
        <SvgIcon class="mr-2 text-5 -ml-2" :local-icon="dropdown.icon"></SvgIcon>
        {{ dropdown.size }}
      </NButton>
    </NDropdown>
  </div>

  <!-- 画布切换弹窗 -->
  <NModal
    v-model:show="modal.visible"
    class="w-120 bg-header"
    preset="card"
    display-directive="if"
    :auto-focus="false"
    @after-leave="modal.reset"
  >
    <template #header>
      <p class="text-5 text-base_text font-500">
        {{ modal.content }}
      </p>
    </template>
    <p class="mb-6 text-3.5 text-#A4A4B0 -mt-3">
      {{ modal.subContent }}
    </p>
    <div class="flex-y-center justify-end">
      <NButton type="default" class="!mr-2 !w-22" @click="modal.visible = false">取消</NButton>
      <NButton type="primary" class="!w-22" @click="modal.submit">确定</NButton>
    </div>
  </NModal>
</template>

<style scoped></style>
